<template>
	<view class="padding30rpx">
		<view class="login-font">
			<view>注册账号</view>
		</view>
		<view>
			<view class="login-marg">手机号</view>
			<view class="line" style="padding-bottom: 30rpx;">
				<input v-model="mobile" placeholder="请输入手机号" />
			</view>
		</view>
		<view>
			<view class="login-marg">验证码</view>
			<view class="line dis" style="padding-bottom: 30rpx;">
				<input v-model="code" type="number" maxlength="6" placeholder="请输入验证" />
				<label v-show="show" @tap="fa">发送验证码</label>
				<label style="color: #606266;" v-show="!show">{{verifyTip}}秒重发</label>
			</view>
		</view>
		<view>
			<view class="login-marg">密码</view>
			<view class="line" style="padding-bottom: 30rpx;">
				<input type="password" v-model="password" placeholder="请输入密码" />
			</view>
		</view>
		<button @tap="enter">注册</button>
		<view class="hui66 bot" style="text-align: center; margin-top: 45rpx;">

			<u-checkbox active-color='#00A29A' shape='circle' @change="IT" v-model="xieyc"></u-checkbox>


			我同意<label @tap="zan">《用户协议》</label>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				xieyc: false,
				mobile: '',
				code: '',
				password: '',
				xie: '0',
				verifyTip: 60,
				show: true
			}
		},
		methods: {
			IT(e) {
				this.xieyc = e.value
			},
			//注册
			enter() {
				var vm = this
				console.log(vm.xie)
				if (vm.xieyc) {
					if (vm.mobile == '') {
						uni.showToast({
							title: "手机号码不能为空！",
							icon: 'none'
						})
						return
					} else if (!(/^1[3456789]\d{9}$/.test(this.mobile))) {
						// return
						uni.showToast({
							title: "手机号码不正确",
							icon: 'none'
						});
						return
					} else if (this.code == '') {
						uni.showToast({
							title: "请输入验证码！",
							icon: 'none'
						});
						return
					} else if (this.password == '') {
						uni.showToast({
							title: "请输入密码！",
							icon: 'none'
						});
						return
					} else {
						uni.request({
							method: 'POST',
							url: this.$api + '/app/UserController/register',
							data: {
								"code": this.code,
								"password": this.password,
								"phone": this.mobile
							},
							success: (res) => {
								console.log('---------登录成功----------', res.data)
								if (res.data.code == 200) {
									this.$mHelper.toast('注册成功')
									setTimeout(function() {
										uni.navigateBack({
											delta: 1
										});
									}, 1200);
								} else {
									uni.showToast({
										icon: 'none',
										title: res.data.message
									})
								}
							},
							fail: (err) => {
								console.log(err)
							}
						})
					}

				} else {
					uni.showToast({
						icon: 'none',
						title: '请同意用户协议'
					})
				}

			},
			timedown(num) {
				var that = this;
				if (num == 0) {
					that.show = true; // 是否显示获取验证码
					return clearTimeout();
				} else {
					that.show = false; // 是否显示获取验证码
					setTimeout(function() {
						that.verifyTip = num - 1
						that.timedown(num - 1);
					}, 1000); //定时每秒减一  
				}
			},
			//发送验证码
			fa() {

				if (this.mobile == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号'
					})
				} else {

					var vm = this
					uni.request({
						method: 'GET',
						url: this.$api + '/app/UserController/getVerificationCode',
						data: {
							phone: vm.mobile,
						},
						success: (res) => {
							console.log(res.data)
							if (res.data.code == 200) {
								uni.showToast({
									icon: 'success',
									title: res.data.message
								})
								this.show = false
								this.timedown(this.verifyTip)
							} else {
								uni.showToast({
									icon: 'none',
									title: '验证发送失败！'
								})
							}
						},
						fail: (err) => {
							console.log(err)
						}
					})
				}

			},
			//用户协议
			zan() {
				this.$mHelper.to('pagesA/protocol/protocol', true)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bot {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	button {
		margin-top: 256rpx;
		background-color: #00a29a;
		color: #FFFFFF;
		height: 92rpx;
		line-height: 92rpx;
		width: 100%;
	}

	input {
		font-size: 28rpx;
	}

	label {
		color: #007AFF;
	}

	.login-top {
		text-align: center;
		margin: 30rpx 0;

		image {
			width: 229rpx;
			height: 124rpx;

		}
	}

	.login-font {
		font-size: 40rpx;
		font-weight: 600;
		padding-bottom: 30rpx;
	}

	.login-marg {
		margin: 30rpx 0;
		font-size: 32rpx;
	}
</style>
